<template>
  <!-- 
    谁要改值 谁自定义事件函数   this.$emit触发函数

    组件通信 
    - props
      - props可以传值 传值代表 父->子
      - props也可以传函数   传函数代表 子->父
      - 只能父子之间传递 
    - 自定义事件 (思路和props一样)
      - 在父组件中给子组件绑定一个自定义事件 
      - 事件函数写在父组件里 
      - 子组件通过vm.$emit调用事件函数 可以传递参数


    常见API
      - vm.$on('自定义事件名', 事件函数) 绑定自定义事件函数  ** 一般在初始化时绑定函数**
      - vm.$once("事件名",事件函数):绑定自定义事件,只能触发一次
      - vm.$emit("事件名",参数):调用自定义事件
      - vm.$off("事件名"/["事件名"],事件函数?):解绑某些自定义事件

   -->

  <div>
    <h1>我是app组件</h1>
    {{ count }}
    <hr />
    <Child  ref="childComp" />
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'App',
  components: { Child },
  data() {
    return {
      count: 0
    }
  },

  mounted() {
    //初始化的时候，在这里对某一个子组件绑定自定义事件  $once是触发一次就 自动解绑
    this.$refs.childComp.$on('changeCount',this.changeCount)
    // this.$refs.childComp.$once('changeCount',this.changeCount)
  },


  methods: {
    changeCount(value) {
      console.log(value)
      this.count += value
    }
  }
}
</script>

<style>
</style>